<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<h5 style="margin: 8px 39px;color: red;">带 * 号为必填选项</h5>
<form:form commandName="taskjob" cssClass="form-horizontal" role="form">
    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="taskName"><span
                style="color:red;">* </span>任务名称</label>
        <div class="col-sm-4">
            <input type="text" name="taskName" id="taskName" placeholder="任务名称" value="${taskjob.taskName}"
                   class="form-control " required>
        </div>

        <label class="col-sm-2 control-label no-padding-right" for="projectNames"><span style="color:red;">* </span>项目名称</label>
        <div class="col-sm-4">
            <select name="projectName" id="projectNames" class="form-control" required>
                <option value="">其他</option>
                <c:forEach items="${newProjectsList}" var="newProjectsList">
                    <option id="${newProjectsList.sysId}"
                            value="${newProjectsList.name}">${newProjectsList.name}</option>
                </c:forEach>
            </select>
        </div>
    </div>

    <%--节点id的后台name  需修改为nodeNames--%>
    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="nodeIds">节点ID</label>
        <div class="col-sm-4">
            <select name="nodeId" id="nodeIds" class="form-control"></select>
        </div>
        <label class="col-sm-2 control-label no-padding-right" for="node-Names">节点名称</label>
        <div class="col-sm-4">
            <input type="text" name="nodeNames" id="node-Names" placeholder="节点名称" value="${taskjob.nodeName}"
                   class="form-control " required>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="taskContent"><span style="color:red;">* </span>督查事项详情</label>
        <div class="col-sm-10">
            <textarea rows="5" id="taskContent" name="taskContent" placeholder="督查事项详情" value="${taskjob.taskContent}"
                      class="form-control " required/>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="groupId"><span
                style="color:red;">* </span>督查组别</label>
        <div class="col-sm-4">
            <select name="groupId" id="groupId" class="inspectorType form-control" multiple="multiple">
                <optgroup label="">
                    <c:forEach items="${jobGroups}" var="jobGroups">
                        <option value="${jobGroups.groupCode}">${jobGroups.groupName}</option>
                    </c:forEach>
                </optgroup>
            </select>
        </div>
        <label class="col-sm-2 control-label no-padding-right" for="involveUnits"><span style="color:red;">* </span>涉及部门</label>
        <div class="col-sm-4">
            <select name="involveUnit" id="involveUnits" class="form-control departments" multiple="multiple">
                <optgroup label="">

                    <c:forEach items="${deptLists}" var="deptLists">
                        <option value="${deptLists.branch}">${deptLists.branch}</option>
                    </c:forEach>

                </optgroup>
            </select>
        </div>
    </div>

    <%--  <div class="form-group">
          <label class="col-sm-2 control-label no-padding-right" for="inspectors">* 督查组联系人</label>
          <div class="col-sm-4">
              <input type="text" name="inspectors" id="inspectors" placeholder="督查组成员" value="${taskjob.inspectors}"
                     class="form-control " required>
          </div>
          <label class="col-sm-2 control-label no-padding-right" for="expirationDate">* 任务到期时间</label>
          <div class="col-sm-4">
              <input type="text" name="expirationDate" id="expirationDate" placeholder="任务到期时间"
                     value="${taskjob.expirationDate}" class="form-control date-picker" required>
          </div>

      </div>--%>

    <div class="form-group">
            <%-- <label class="col-sm-2 control-label no-padding-right" for="phones">* 督查联系电话</label>
             <div class="col-sm-4">
                 <input type="text" name="phones" id="phones" placeholder="手机号" value="${taskjob.phones}"
                        class="form-control " required>
             </div>--%>
        <label class="col-sm-2 control-label no-padding-right" for="planStartDates"><span style="color:red;">* </span>计划开始时间</label>
        <div class="col-sm-4">
            <input type="text" name="planStartDate" id="planStartDates" placeholder="计划开始时间"
                   autocomplete="off" value="${taskjob.planStartDate}" class="form-control date-picker" required>
        </div>

        <label class="col-sm-2 control-label no-padding-right" for="planEndDates"><span style="color:red;">* </span>计划结束时间</label>
        <div class="col-sm-4">
            <input type="text" name="planEndDate" id="planEndDates" placeholder="计划结束时间" value="${taskjob.planEndDate}"
                   autocomplete="off" class="form-control date-picker" required>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="resDepts"><span
                style="color:red;">* </span>责任单位</label>
        <div class="col-sm-4">
            <input type="text" name="resDept" id="resDepts" placeholder="责任单位" value="${taskjob.resDept}"
                   class="form-control " required>
        </div>


    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="resUsers"><span
                style="color:red;">* </span>责任人</label>
        <div class="col-sm-4">
            <input type="text" name="resUser" id="resUsers" placeholder="责任人" value="${taskjob.resUser}"
                   class="form-control " required>
        </div>
        <label class="col-sm-2 control-label no-padding-right" for="operatorUsers"><span style="color:red;">* </span>经办人</label>
        <div class="col-sm-4">
            <input type="text" name="operatorUser" id="operatorUsers" placeholder="经办人" value="${taskjob.operatorUser}"
                   class="form-control " required>
        </div>

    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="resPhones"><span style="color:red;">* </span>责任人手机号</label>
        <div class="col-sm-4">
            <input type="text" name="resPhone" id="resPhones" placeholder="责任人手机号" value="${taskjob.resPhone}"
                   class="form-control " required>
        </div>
        <label class="col-sm-2 control-label no-padding-right" for="operatorPhone"><span style="color:red;">* </span>经办人手机号</label>
        <div class="col-sm-4">
            <input type="text" name="operatorPhone" id="operatorPhone" placeholder="经办人手机号"
                   value="${taskjob.operatorPhone}" class="form-control " required>
        </div>
    </div>

    <%--<div class="form-group  input-no-wrap">
        <label class="col-sm-2 control-label no-padding-right" for="taskDate">* 任务完成时限</label>
        <div class="col-sm-4 input-group">
            <input type="number" min="0" name="taskDate" id="taskDate" placeholder="请输入数字" value="${taskjob.taskDate}"
                   class="form-control " onkeyup="checkinteger(this)" required
            ><span class="input-group-addon">天</span>
        </div>
    </div>--%>

    <%--任务id  隐藏--%>
    <input type="text" id="taskId" value="${taskjob.sysId}" hidden>
    <form:hidden path="sysId"/>
</form:form>
<hr width="100%;height:2px;">
<div class="row" style="margin-left: 2px;">
    * 以上按住如此标志：<img src="/assets/web/img/zzc.png"  alt="提示" />可拖动调整相应输入框大小
</div>
<script>
    //多选框
    $(function () {
        //督查组
        $(".inspectorType").change(function () {
            console.log(11111);
            console.log($("#duchaGroup .fs-label").val());
        });
        $('.inspectorType').fSelect();

        //涉及部门
        $(".departments").change(function () {
            console.log($(".demo option:selected").text());
        });
        $('.departments').fSelect();
    });

    //三级联动
    $("#projectNames").change(function () {
        var projectName = $("#projectNames option:selected").val();
        console.log(projectName);
        $.ajax({
            url: "/missions/queryNodeIdByProjectName",
            type: "POST",
            dataType: "json", //返回数据形式为json
            contentType: 'application/json;charset=UTF-8',
            data: JSON.stringify({"name": projectName}),
            success: function (res) {
                if (res.code == "200") {
                    console.log(res);
                    var item = res.data;
                    var html = "";
                    for (var i = 0; i < item.length; i++) {
                        html += '\
                             <option  value="' + item[i] + '">' + item[i] + '</option>\
                        ';
                    }
                    $("#nodeIds").html(html);

                }
            }
        });

    });

    $("#nodeIds").change(function () {
        var nodeIds = $("#nodeIds option:selected").val();
        var projectId = $("#projectNames option:selected").attr("id").toString();
        $.ajax({
            url: "/missions/queryNodeNameByNodeIdAndProjectID",
            type: "POST",
            dataType: "json", //返回数据形式为json
            contentType: 'application/json;charset=UTF-8',
            data: JSON.stringify({"projectId": projectId, "nodeId": nodeIds}),
            success: function (res) {
                if (res.code == "200") {
                    var item = res.data;
                    $("#node-Names").val(item.nodeName);//节点名
                    $("#resDepts").val(item.resDept);//责任单位
                    $("#resUsers").val(item.resUser);//责任人
                    $("#resPhones").val(item.resUserPhone);//责任人手机号码

                    $("#operatorUsers").val(item.operatorUser);//经办人
                    $("#operatorPhone").val(item.operatorPhone);//经办人手机号码
                }
            }
        });

    });

    jQuery(function ($) {
        $(".date-picker").datepicker({
            inline: true,
            format: "yyyymmdd",
            autoclose: true,
            todayHighlight: true,
            language: 'cn'
        }).next().on(ace.click_event, function () {
            $(this).prev().focus();
        });
    });

    /*    var planStartDate= dates1.substring(0, 4)+"-"+dates1.substring(4, 6)+"-"+dates1.substring(6, 8);
        var planEndDate= dates2.substring(0, 4)+"-"+dates2.substring(4, 6)+"-"+dates2.substring(6, 8);*/

    //校验正整数
    function checkinteger(val) {
        if (val.value.length == 0) {
            val.value = val.value.replace(/[^1-9]/g, '')
        } else {
            val.value = val.value.replace(/\D/g, '')
        }
    }
</script>


